<template>
	<view>
		<u-navbar title="置换兑现审核" @leftClick="leftClick" :placeholder="true" :autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="close" size="19"></u-icon>
			</view>
		</u-navbar>
		<view>
			<u-sticky bgColor="#fff">
				<u-tabs :list="list" :activeStyle="{
            color: '#15298C',
            fontWeight: 500,
						fontsize: '28rpx',
						transform: 'scale(1.05)'
        }" :inactiveStyle="{
				    color: '#333333',
						fontWeight: 400,
						fontsize: '28rpx',
				    transform: 'scale(1)'
				}" lineWidth="25" lineColor="#15298C" @change="tabChange">
					<view slot="right" style="padding:0px 10px;display: flex;align-items: center;" @tap="showFilter">
						<image src="/static/filter.png" style="width: 30rpx;height: 28rpx;" mode=""></image>
						<view class="filter-text">筛选</view>
					</view>
				</u-tabs>
			</u-sticky>
		</view>
		<view class="tips">
			<u-notice-bar icon="" color="#FF1212" bgColor="#FFDFDF" :speed="50" :text="text"></u-notice-bar>
		</view>
		<view class="list">
			<scroll-view style="height: 82vh;" scroll-y @scrolltolower="handleScrolltolower" v-if="dataSource.length != 0">
				<view class="item" v-for="(item,index) in dataSource" :key="index">
					<view class="item-top">
						<view class="top-left">{{item.dataaudit.auditCode}}</view>
						<view class="top-right">
							反馈截止时间：{{item.feedbackDeadlineTime ? item.feedbackDeadlineTime : "--" }}
						</view>
					</view>
					<view class="item-middle">
						<view class="middle-left" @click="handleViewImage(item.voucherUrls)">
							<image src="/static/emptyicon.png" v-if="!item.voucherUrls" style="width: 208rpx;height: 208rpx;" mode="">
							</image>
							<image :src="item.voucherUrls.split(',')[0]" v-if="item.voucherUrls" style="width: 208rpx;height: 208rpx;"
								mode="aspectFit"></image>
							<view class="statusText">
								<text v-if="item.status == 1">待兑现</text>
								<text v-if="item.status == 2">待上传凭证</text>
								<text v-if="item.status == 3">待审核</text>
								<text v-if="item.status == 4">驳回待提交</text>
								<text v-if="item.status == 5">审核通过</text>
								<text v-if="item.status == 6">已作废</text>
							</view>
						</view>
						<view class="middle-right" @click="handleViewDetails(item)">
							<view class="name">{{item.dataaudit ? item.dataaudit.newVehicleType : "--"}}</view>
							<view>
								<text class="label">车架号：</text>
								<text class="value">{{item.dataaudit ? item.dataaudit.vinNumber : "--"}}</text>
							</view>
							<view>
								<text class="label">车主姓名：</text>
								<text class="value">{{item.dataaudit ? item.dataaudit.carOwnerName : "--"}}</text>
							</view>
							<view>
								<text class="label">兑现日期：</text>
								<text class="value">{{item.exchangeTime ? item.exchangeTime : "--" }}</text>
							</view>
							<view>
								<text class="label">兑现金额（元）：</text>
								<text class="value color">{{item.exchangeAmount ? item.exchangeAmount : "--" }}</text>
								<text class="upload"
									v-if="item.status == 2 && compareDateDifference(item.feedbackDeadlineTime,currentTime, dictValue)">！待上传</text>
							</view>
						</view>
					</view>
					<view class="item-btns">
						<view class="btn-item" @click="handleLog(item)">操作日志</view>
						<view class="btn-item" @click="handleViewDetails(item)">查看详情</view>
						<view class="btn-item reupload" @click="handleViewDetails(item)" v-if="item.status == 4">重新上传凭证</view>
						<view class="btn-item reupload" @click="handleViewDetails(item)" v-if="item.status == 2">上传凭证</view>
					</view>
				</view>
				<!-- <view style="height: 10rpx;"></view> -->
				<u-loadmore :status="loadmoreStatus" />
				<view style="height: 10rpx;"></view>
			</scroll-view>
			<u-empty v-if="dataSource.length == 0"> </u-empty>
		</view>

		<u-popup :show="show" mode="top" @close="close" @open="open">
			<view class="popup">
				<view>
					<view class="leftClose" @click="show = false">
						<image src="/static/close.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
					</view>
					<view class="title" @click="showDatetimePicker = true">
						筛选
					</view>
				</view>
				<view style="height: 100%;">
					<view class="scroll-panel" id="scroll-panel">
						<view class="search">
							<view class="left">
								<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" :scroll-into-view="leftIntoView">
									<view class="item" v-for="(item, index) in leftList" :key="index"
										:class="{ 'active': index == leftIndex }" :id="'left-' + index" :data-index="index" @tap="leftTap">
										<view class="activelink"></view>
										<text class="item-name">{{ item.label }}</text>
									</view>
								</scroll-view>
							</view>
							<view class="right">
								<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll"
									:scroll-into-view="scrollInto" scroll-with-animation="true">
									<view class="main-item" v-for="(item, index) in rightList" :key="index" :id="'item-' + index">
										<view class="right-name">
											<view>{{ item.label }}</view>
										</view>
										<view class="right-item">
											<view v-if="item.model == 'auditCode'">
												<u--input :placeholder="'请输入'+ item.label" border="surround"
													v-model="item.auditCode"></u--input>
											</view>
											<view v-if="item.model == 'vinNumber'">
												<u--input :placeholder="'请输入'+ item.label" border="surround"
													v-model="item.vinNumber"></u--input>
											</view>
											<view v-if="item.model == 'carOwnerName'">
												<u--input :placeholder="'请输入'+ item.label" border="surround"
													v-model="item.carOwnerName"></u--input>
											</view>
											<view v-if="item.type == 'select'">
												<view class="selectView">
													<view class="selectItem" @tap="itemTap(item,selectitem)"
														:class="{'activeItem' : selectitem.value == item[item.model] }"
														v-for="selectitem in item.list">
														{{selectitem.label}}
													</view>
												</view>
											</view>
											<view v-if="item.type == 'date'">
												<view class="date">
													<view @click="timeChange(1,item.StartTime,item)">
														<u--input disabled placeholder="开始 时间" :value="item[item.StartTime]" border="surround">
															<template slot="suffix">
																<u-icon name="calendar"></u-icon>
															</template>
														</u--input>
													</view>
													<view style="margin: 0px 10px;">-</view>
													<view @click="timeChange(2,item.EndTime,item)">
														<u--input disabled placeholder="结束 时间" :value="item[item.EndTime]" border="surround">
															<template slot="suffix">
																<u-icon name="calendar"></u-icon>
															</template>
														</u--input>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<view class="reset" @tap="handleReset">
						重置
					</view>
					<view class="confirm" @tap="handleSearch">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="showDatetimePicker" v-model="datetimePicker" :maxDate="maxDate" mode="date"
			@confirm="handleConfirm" @cancel="handleClose"></u-datetime-picker>
	</view>
</template>

<script>
	import webUni from "@/common/uni.webview.1.5.2.js";
	import {
		hybridEncrypt
	} from "@/utils/crypto.js"

	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date

	export default {
		data() {
			return {
				maxDate: new Date(`${year}-${month}-${date}`).getTime(),
				datetimePicker: `${year}-${month}-${date}`,
				loadmoreStatus: "loadmore",
				show: false,
				showDatetimePicker: false,
				text: " 兑现金额：若 “值” 为空，表明数据处于初始化状态；若 “值” 大于 0，意味着返利成功；若 “值” 小于 0，则表示返利失败/扣除返利 。",
				list: [{
					name: '全部',
				}, {
					name: '待兑现',
				}, {
					name: '待上传凭证'
				}, {
					name: '待审核'
				}, {
					name: '驳回待提交'
				}, {
					name: '审核通过'
				}, {
					name: '已作废'
				}],
				leftList: [{
						label: "审核编号"
					}, {
						label: "新车车架号"
					},
					{
						label: "资料类型"
					},
					{
						label: "打款方式"
					},
					{
						label: "是否上传过凭证"
					},
					{
						label: "更新变更时间"
					},
					{
						label: "创建时间"
					},
					{
						label: "凭证初次提交时间"
					},
					{
						label: "最后一次凭证提交时间"
					},
					{
						label: "审核通过时间"
					},
					{
						label: "反馈截止时间"
					},
					{
						label: "兑换日期"
					},
					{
						label: "车主姓名"
					}
				],
				rightList: [{
						label: "审核编号",
						type: "input",
						auditCode: "",
						model: "auditCode",
					}, {
						label: "新车车架号",
						type: "input",
						vinNumber: "",
						model: "vinNumber",
					},
					{
						label: "资料类型",
						type: "select",
						model: "dataCategory",
						dataCategory: "",
						list: [{
								label: "全部",
								value: ""
							},
							{
								label: "换购",
								value: "-1"
							},
							{
								label: "增购",
								value: "-2"
							}, {
								label: "报废",
								value: "-3"
							}
						]
					},
					{
						label: "打款方式",
						type: "select",
						paymentType: "",
						model: "paymentType",
						list: [{
								label: "全部",
								value: ""
							},
							{
								label: "银行转账",
								value: 1
							},
							{
								label: "抵扣车款",
								value: 2
							}, {
								label: "其他",
								value: 3
							}
						]
					},
					{
						label: "是否上传过凭证",
						type: "select",
						isUploadVoucher: "",
						model: "isUploadVoucher",
						list: [{
								label: "全部",
								value: ""
							},
							{
								label: "是",
								value: "1"
							},
							{
								label: "否",
								value: "0"
							}
						]
					},
					{
						label: "更新变更时间",
						type: "date",
						StartTime: "lastChangeTimeBeginTime",
						EndTime: "lastChangeTimeEndTime",
						lastChangeTimeBeginTime: "",
						lastChangeTimeEndTime: "",
					},
					{
						label: "创建时间",
						type: "date",
						StartTime: "beginTime",
						EndTime: "endTime",
						beginTime: "",
						endTime: ""
					},
					{
						label: "凭证初次提交时间",
						type: "date",
						StartTime: "voucherTimeBeginTime",
						EndTime: "voucherTimeEndTime",
						voucherTimeBeginTime: "",
						voucherTimeEndTime: "",
					},
					{
						label: "最后一次凭证提交时间",
						type: "date",
						StartTime: "lastVoucherTimeBeginTime",
						EndTime: "lastVoucherTimeEndTime",
						lastVoucherTimeBeginTime: "",
						lastVoucherTimeEndTime: "",
					},
					{
						label: "审核通过时间",
						type: "date",
						StartTime: "lastExaminePassTimeBeginTime",
						EndTime: "lastExaminePassTimeEndTime",
						lastExaminePassTimeBeginTime: "",
						lastExaminePassTimeEndTime: "",
					},
					{
						label: "反馈截止时间",
						type: "date",
						StartTime: "feedbackDeadlineBeginTime",
						EndTime: "feedbackDeadlineEndTime",
						feedbackDeadlineBeginTime: "",
						feedbackDeadlineEndTime: "",
					},
					{
						label: "兑现日期",
						type: "date",
						StartTime: "exchangeBeginTime",
						EndTime: "exchangeEndTime",
						exchangeBeginTime: "",
						exchangeEndTime: "",
					},
					{
						label: "车主姓名",
						type: "input",
						auditCode: "",
						model: "carOwnerName",
					}
				],
				scrollHeight: 400,
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				scrollInto: '',
				currentType: "",
				currentTimeFiled: "",
				currentTimeItem: {},
				page: {
					pageNum: 1,
					pageSize: 10,
				},
				queryParams: {},
				dataSource: [],
				statusList: [{
						label: "待兑现",
						value: 1
					},
					{
						label: "待上传凭证",
						value: 2
					},
					{
						label: "待审核",
						value: 3
					},
					{
						label: "驳回待提交",
						value: 4
					},
					{
						label: "审核通过",
						value: 5
					},
					{
						label: "已作废",
						value: 6
					},
				],
				dictValue: 0,
				currentTime: 0,
				currentQueryParams: {},
			}
		},
		onLoad(options) {
			console.log("进入onLoad");
			console.log(options);
			uni.setStorageSync("user", hybridEncrypt(JSON.stringify({
				"key": "mifeng_jiecheng@r86xlsthhf3l4jm6gjx0zizs",
				...options
			})))
		},
		onShow() {
			console.log("进入onshow");
			uni.$on('refreshPage', () => {
				this.page.pageNum = 1;
				this.getList(true)
			});
			this.getList(true)
		},
		onUnload() {
			uni.$off('refreshPage', this.getList(true)); // 页面销毁时移除监听
		},
		async created() {
			let res = await this.api.getDictOne("days");
			console.log(res);
			console.log("res.data.dictValue", res.data);
			this.dictValue = res.data.data.dictValue;
			this.currentTime = res.data.currentTime
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.page.pageNum = 1;
			this.getList(true);
		},
		methods: {
			leftClick() {
				webUni.postMessage({
					data: {
						type: "back",
						data: []
					},
				})
				uni.removeStorageSync("user")
			},
			//判断时间
			// compareDateDifference(startDateStr, endDateStr, n) {
			// 	console.log(startDateStr, endDateStr, n);
			// 	if (!startDateStr) {
			// 		return false;
			// 	}
			// 	// 将时间字符串转换为 Date 对象
			// 	const startDate = new Date(startDateStr);
			// 	const endDate = new Date(Number(endDateStr));

			// 	// 计算两个时间戳的差值（单位：毫秒）
			// 	const timeDifference = startDate - endDate;

			// 	// 将差值转换为天数
			// 	let daysDifference = Math.abs(timeDifference) / (1000 * 60 * 60 * 24);
			// 	if (timeDifference < 0) {
			// 		daysDifference = -daysDifference;
			// 	}
			// 	// 判断差值是否大于或小于 n 天
			// 	if (daysDifference > n) {
			// 		return false;
			// 	} else if (daysDifference <= n) {
			// 		return true;
			// 	} else {
			// 		return false;
			// 	}
			// },
			compareDateDifference(startDateStr, endDateStr, n) {
				if (!startDateStr) {
					return false;
				}

				// 1. 将参数1（年月日字符串）转换为 Date 对象
				const startDate = new Date(startDateStr);
				const year = startDate.getFullYear();
				const month = String(startDate.getMonth() + 1).padStart(2, '0'); // 补0
				const day = String(startDate.getDate()).padStart(2, '0'); // 补0
				const startTime = new Date(year + "-" + month + '-' + day);

				console.log(year + "-" + month + '-' + day);

				// 2. 将参数2（时间戳字符串）转换为 Number 再转 Date 对象
				const endDateTimestamp = Number(endDateStr);
				if (isNaN(endDateTimestamp)) {
					console.error("endDateStr 不是有效的时间戳字符串");
					return false;
				}
				const endDate = new Date(endDateTimestamp);
				const year1 = endDate.getFullYear();
				const month1 = String(endDate.getMonth() + 1).padStart(2, '0'); // 补0
				const day1 = String(endDate.getDate()).padStart(2, '0'); // 补0
				console.log(year1 + "-" + month1 + '-' + day1);

				const endTime = new Date(year1 + "-" + month1 + '-' + day1);
				// 3. 计算两个时间的差值（单位：毫秒）
				const timeDifference = startTime - endTime; // 参数1 - 参数2
				// 4. 将差值转换为天数
				const daysDifference = timeDifference / (1000 * 60 * 60 * 24);
				console.log(daysDifference);

				// 5. 判断是否 >= n 天
				return daysDifference >= 0;
			},
			tabChange(e) {
				console.log(e);
				// status
				let item = this.statusList.filter(val => val.label == e.name);
				console.log(item);
				this.page.pageNum = 1;
				this.queryParams.status = e.name == "全部" ? [] : [item[0].value]
				this.getList(true);
			},
			itemTap(item, selectitem) {
				console.log(item);
				item[item.model] = selectitem.value;
			},
			handleSearch() {
				this.show = false;
				console.log(this.rightList);
				let obj = {};
				let val = this.rightList;
				obj.auditCode = val[0].auditCode;
				obj.vinNumber = val[1].vinNumber;
				obj.dataCategory = val[2].dataCategory ? [val[2].dataCategory] : [];
				obj.paymentType = val[3].paymentType ? [val[3].paymentType] : [];
				obj.isUploadVoucher = val[4].isUploadVoucher ? [val[4].isUploadVoucher] : [];
				obj.lastChangeTimeBeginTime = val[5].lastChangeTimeBeginTime;
				obj.lastChangeTimeEndTime = val[5].lastChangeTimeEndTime;
				obj.beginTime = val[6].beginTime;
				obj.endTime = val[6].endTime;
				obj.voucherTimeBeginTime = val[7].voucherTimeBeginTime;
				obj.voucherTimeEndTime = val[7].voucherTimeEndTime;
				obj.lastVoucherTimeBeginTime = val[8].lastVoucherTimeBeginTime;
				obj.lastVoucherTimeEndTime = val[8].lastVoucherTimeEndTime;
				obj.lastExaminePassTimeBeginTime = val[9].lastExaminePassTimeBeginTime;
				obj.lastExaminePassTimeEndTime = val[9].lastExaminePassTimeEndTime;
				obj.feedbackDeadlineBeginTime = val[10].feedbackDeadlineBeginTime;
				obj.feedbackDeadlineEndTime = val[10].feedbackDeadlineEndTime;
				obj.carOwnerName = val[12].carOwnerName;
				console.log(obj);
				this.queryParams = obj;
				this.getList(true);
			},
			handleReset() {
				let newlist = [{
						label: "审核编号",
						type: "input",
						auditCode: "",
						model: "auditCode",
					}, {
						label: "新车车架号",
						type: "input",
						vinNumber: "",
						model: "vinNumber",
					},
					{
						label: "资料类型",
						type: "select",
						model: "dataCategory",
						dataCategory: "",
						list: [{
								label: "全部",
								value: ""
							},
							{
								label: "换购",
								value: -1
							},
							{
								label: "增购",
								value: -2
							}, {
								label: "报废",
								value: -3
							}
						]
					},
					{
						label: "打款方式",
						type: "select",
						paymentType: "",
						model: "paymentType",
						list: [{
								label: "全部",
								value: ""
							},
							{
								label: "银行转账",
								value: 1
							},
							{
								label: "抵扣车款",
								value: 2
							}, {
								label: "其他",
								value: 3
							}
						]
					},
					{
						label: "是否上传过凭证",
						type: "select",
						isUploadVoucher: "",
						model: "isUploadVoucher",
						list: [{
								label: "全部",
								value: ""
							},
							{
								label: "是",
								value: "1"
							},
							{
								label: "否",
								value: "0"
							}
						]
					},
					{
						label: "更新变更时间",
						type: "date",
						StartTime: "lastChangeTimeBeginTime",
						EndTime: "lastChangeTimeEndTime",
						lastChangeTimeBeginTime: "",
						lastChangeTimeEndTime: "",
					},
					{
						label: "创建时间",
						type: "date",
						StartTime: "beginTime",
						EndTime: "EndTime",
						beginTime: "",
						EndTime: ""
					},
					{
						label: "凭证初次提交时间",
						type: "date",
						StartTime: "voucherTimeBeginTime",
						EndTime: "voucherTimeEndTime",
						voucherTimeBeginTime: "",
						voucherTimeEndTime: "",
					},
					{
						label: "最后一次凭证提交时间",
						type: "date",
						StartTime: "lastVoucherTimeBeginTime",
						EndTime: "lastVoucherTimeEndTime",
						lastVoucherTimeBeginTime: "",
						lastVoucherTimeEndTime: "",
					},
					{
						label: "审核通过时间",
						type: "date",
						StartTime: "lastExaminePassTimeBeginTime",
						EndTime: "lastExaminePassTimeEndTime",
						lastExaminePassTimeBeginTime: "",
						lastExaminePassTimeEndTime: "",
					},
					{
						label: "反馈截止时间",
						type: "date",
						StartTime: "feedbackDeadlineBeginTime",
						EndTime: "feedbackDeadlineEndTime",
						feedbackDeadlineBeginTime: "",
						feedbackDeadlineEndTime: "",
					},
					{
						label: "车主姓名",
						type: "input",
						auditCode: "",
						model: "carOwnerName",
					}
				];
				this.currentQueryParams = {};
				this.$set(this, 'rightList', newlist);
			},
			getList(isEmpty = false) {
				uni.showLoading({
					title: '加载中'
				});
				this.api.exchangeList({
					...this.page,
					...this.queryParams,
					...this.currentQueryParams
				}).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh()
					console.log(res);
					if (isEmpty) {
						this.dataSource = [];
					}
					this.total = res.data.total;
					if (this.total > this.dataSource.length) {
						this.dataSource = this.dataSource.concat(res.data.rows);
					} else {
						this.loadmoreStatus = "nomore";
					}
				})
			},
			//触底加载
			handleScrolltolower() {
				console.log("进入");
				if (this.total > this.dataSource.length) {
					this.page.pageNum++;
					this.loadmoreStatus = "loading";
					this.getList();
				} else {
					this.loadmoreStatus = "nomore";
				}
			},
			timeChange(type, filed, item) {
				console.log(type, filed, item);
				this.currentType = type;
				this.currentTimeFiled = filed;
				this.currentTimeItem = item;
				this.showDatetimePicker = true;
			},
			open() {},
			close() {
				this.showDatetimePicker = false;
			},
			//格式化时间
			timestampToDate(timestamp, type, prix) {
				console.log(timestamp, type);
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				if (type == 1) {
					if (prix) {
						return `${year}-${month}-${day} 00:00:00`;
					} else {
						return `${year}-${month}-${day}`;
					}
				} else {
					if (prix) {
						return `${year}-${month}-${day} 23:59:59`;
					} else {
						return `${year}-${month}-${day}`;
					}

				}
			},
			handleConfirm(e) {
				console.log(e);
				this.currentTimeItem[this.currentTimeFiled] = this.timestampToDate(e.value, this.currentType, false);
				this.currentQueryParams[this.currentTimeFiled] = this.timestampToDate(e.value, this.currentType, true);
				console.log(this.currentQueryParams);
				console.log(this.currentTimeItem);
				this.showDatetimePicker = false;
			},
			handleClose() {
				this.showDatetimePicker = false;
			},
			showFilter() {
				this.show = true;
				/* 等待DOM挂载完成 */
				this.$nextTick(() => {
					/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
					setTimeout(() => {
						/* 等待滚动区域初始化完成 */
						this.initScrollView().then(() => {
							/* 获取列表数据，你的代码从此处开始 */
							// this.getRightQuery();
							this.getElementTop();
						});
					}, 200);
				});
			},
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						});
					}).exec();
				});
			},
			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then(res => {
					let topArr = res.map(item => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;
					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last - 20;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = this.topArr.length - 1; i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if (top + 20 >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = index < 0 ? 0 : index;
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.scrollInto = `item-${index}`;
			},
			handleViewDetails(row) {
				// this.$u.toast("跳转详情");
				uni.navigateTo({
					url: "/pages/exchangeAndRedemption/details?id=" + row.id
				})
			},
			handleViewImage(urls) {
				// this.$u.toast("图片预览");
				if (!urls) {
					return
				}
				uni.previewImage({
					loop: true,
					urls: urls.split(",")
				})
			},
			handleLog(row) {
				// this.$u.toast("操作日志");
				uni.navigateTo({
					url: "/pages/exchangeAndRedemption/log?id=" + row.id
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.filter-text {
		margin-left: 15rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.tips {
		margin: 20rpx 0rpx 0rpx 0px;
		background: #FFDFDF;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF1212;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.list {
		margin: 10rpx;

		.item {
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 20rpx 10rpx;
		}

		.item-top {
			display: flex;
			justify-content: space-between;

			.top-left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.top-right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.item-middle {
			display: flex;
			margin-top: 25rpx;

			.middle-left {
				position: relative;
			}

			.statusText {
				position: absolute;
				top: 0;
				right: 0;
				background: #EEF1FF;
				padding: 10rpx;
				// width: 60rpx;
				height: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #15298C;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.middle-right {
				margin-left: 20rpx;
				line-height: 45rpx;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.value {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.item-btns {
			margin-top: 25rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn-item {
				margin: 10rpx;
				padding: 20rpx 30rpx;
				border-radius: 29rpx;
				border: 1rpx solid #808080;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #1A1A1A;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.reupload {
				background-color: #15298C;
				color: #fff;
			}
		}
	}

	.label {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.color {
		color: #FF1212 !important;
	}

	.upload {
		padding: 10rpx 15rpx;
		margin-left: 60rpx;
		background: #FF1212;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		font-style: normal;
		text-transform: none;
	}

	.scroll-panel {
		// flex-grow: 1;
		height: 100%;
		// overflow: hidden;
	}

	.popup {
		height: 100vh;
		position: relative;
		// background-color: #15298C;

		.popup-footer {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			bottom: 0;
			padding: 20rpx 10rpx;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.reset {
			width: 30%;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #808080;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #1A1A1A;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.confirm {
			width: 60%;
			height: 88rpx;
			background: #15298C;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 30rpx;
			left: 50%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.leftClose {
			position: absolute;
			top: 30rpx;
			left: 30rpx;
		}

		.search {
			margin: 100rpx 0rpx 0rpx 20rpx;
			display: flex;

			.item {
				width: 166rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border: 1px solid;
				// background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #3D3D3D;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.active {
				width: 166rpx;
				height: 100rpx;
				// border: 1px solid;
				// background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #15298C;
				background: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;

			}

			.left {
				// height: 85vh;
				text-align: center;
				width: 166rpx;
				padding: 10rpx;
				background: #F3F5FF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			.right {
				margin: 10rpx 10rpx 10rpx 20rpx;
				// width: 60%;
			}

			.right-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				padding: 10rpx 0rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.date {
				display: flex;
				align-items: center;
			}

			.right-item {
				margin: 20rpx 0rpx;
			}

			.selectView {
				display: flex;
				flex-wrap: wrap;

				.activeItem {
					background: #15298C !important;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin: 0px 20rpx 10rpx 0rpx;
					padding: 20rpx 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF !important;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.selectItem {
					margin: 0px 20rpx 10rpx 0rpx;
					padding: 20rpx 24rpx;
					background: #F3F5FF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
</style>